<!-- 模板 -->
<template>
  <div class="wxUser">
    <div class="box">
       <div class="btn" style="margin-top:20px">
                <el-form  :inline="true"  :model="params" size="small"  label-width="80px" >
                    <el-form-item label="id搜索:">
                        <el-input  v-model="params.openid" placeholder="输入用户id"  clearable  /> 
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="sousupo">搜索</el-button>
                        <el-button type="primary" icon="el-icon-close" size="small" @click="sousupo1">重置</el-button>
                    </span>
                </el-form>
            </div>
      <el-card>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column  label="序号" align="center" type="index"> </el-table-column>
                <!-- <el-table-column prop="nickName" label="用户微信名称" align="center" min-width="180"> </el-table-column>
                <el-table-column label="头像" prop="headUrl" align="center" min-width="180">
                    <template slot-scope="scope">
                        <el-image  style="width: 80px;" :src="scope.row.headUrl"  :preview-src-list="[scope.row.headUrl]"> </el-image>
                    </template>
                </el-table-column> -->
                <el-table-column prop="openid" label="用户id" align="center" min-width="150"> </el-table-column>
                <el-table-column prop="phone" label="联系方式" align="center" min-width="180"> </el-table-column>
                <el-table-column prop="agentType" label="是否代理商" align="center" min-width="180">
                    <template slot-scope="scope">
                        {{scope.row.agentType ==0?'否':scope.row.agentType ==1?'收费代理商':scope.row.agentType ==2?'非收费代理商':'团体测量'}}
                    </template>
                </el-table-column>
                <el-table-column prop="dividePrice" label="分成比(%)" align="center" min-width="150"> </el-table-column>
               
                <el-table-column prop="cumulativeBalance" label="累计金额" align="center" min-width="180"> </el-table-column>
                <el-table-column prop="balance" label="余额" align="center" min-width="180"> </el-table-column>
                <el-table-column prop="frozenBalance" label="冻结金额" align="center" min-width="180"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" min-width="180" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column  label="操作" align="center" fixed="right"  min-width="250">
                    <template slot-scope="scope">
                        <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </el-card>
    </div>
        <pagination
        v-show="newsTotal > 0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getList"
      />

        <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form  label-width="120px" :model="form" :rules="rules" ref="form">
   <el-form-item label="头像" prop="logo">
        <el-upload
        :headers='headers'
        class="avatar-uploader"
        :action="upImage+'/table/upload'"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        >
        <img v-if="form.headUrl" :src="form.headUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    <el-form-item label="用户名称" prop="name">
      <el-input v-model="form.name" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="phone">
      <el-input v-model.number="form.phone" style="width:280px"></el-input>
    </el-form-item>
    <el-form-item label="是否代理商" prop="agentType">
        <el-select
                v-model="form.agentType"
                placeholder="请选择"
                @change="changeAgentType"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="分成比(单位：%)" prop="priceType" v-if="showType">
        <el-select
                v-model="form.priceType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.id"
                  :label="item.price"
                  :value="item.id"
                >
                </el-option>
        </el-select>
    </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {getWxList,getWxUpdate,getWxDsc} from '@/api/partner/index'
import {getPriceAdd,getPriceDsc,getPriceUpdate} from '@/api/teacher/index'
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        tableData:[],
        params: {
            pageNum: 1,
            pageSize: 10,
            openid:''
        },
        newsTotal:0,
        loading:false,
        form:{},
        dialogVisible:false,
        showType:true,
        title:'',
        rules:{
          name: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
          ],
          // logo: [
          //   { required: true, message: '请输入头像', trigger: 'change' }
          // ],
          agentType: [
            { required: true, message: '请选择是否为代理商', trigger: 'change' }
          ],
          phone: [
            {required: true, message: '请输入联系方式', trigger: 'blur' },
            { type: 'number', message: '手机号必须为数字值', trigger: 'blur'}
          ],
        },
        options: [{
          value: 1,
          label: '收费代理商'
        }, {
          value: 2,
          label: '非收费代理商'
        }, {
          value: 3,
          label: '团体测量'
        }, {
          value: 0,
          label: '否'
        }],
        options1:[],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    sousupo(){
      console.log(111)
      this.getList()
    },
    sousupo1(){
      this.params = {
            pageNum: 1,
            pageSize: 10,
            openid:''
        },
        this.getList()
    },
    // 选择客户类型
    changeAgentType(val){
      // console.log(val);
      if(val == 1){
        this.form.priceType = ''
        this.showType = true
        this.getWxList1()
      }else if(val == 0){
        this.showType = false
        // this.getWxList2()
      }else {
        this.form.priceType = ''
        this.showType = true
        this.getWxList2()
      }
    },
      onSubmit(){
        this.form.phone = Number(this.form.phone)
        console.log(this.form);
          this.$refs["form"].validate(valid => {
            if(valid){
               if (this.form.id != undefined) {
                  getWxUpdate(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('修改成功')
                          this.dialogVisible = false
                          this.getList()
                      }
                  })
                } 
            }
       
      });
      },
       // 修改按钮
    handleUpdateClick(row){
      this.dialogVisible = true
      getWxDsc(row.id).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
          if(this.form.agentType == 0){
            this.showType = false
          }else if(this.form.agentType ==  1) {
            this.getWxList1()
            this.showType = true
          }else {
            this.getWxList2()
            this.showType = true
          }
          // console.log(this.form);
        }
      })
      this.title = "修改";
    },
    handleAvatarSuccess(res, file) {
      // console.log(URL.createObjectURL(file.raw));
      this.form.headUrl ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+  res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
      getList(){
        this.loading = true;
        getWxList(this.params).then(res => {
            // console.log(res);
            this.tableData = res.rows;
            this.newsTotal = res.total;
            this.loading = false;
        });
      },
    //   获取分成比
    getWxList1(){
      console.log(123);
        let data = {
            type:2
        }
        getPriceDsc(data).then(res => {
          console.log(res,'分成11111')
          if(res.code == 200){
            this.options1 = res.data
          }
        })
    },
    getWxList2(){
        let data = {
            type:3
        }
        getPriceDsc(data).then(res => {
          console.log(res,'分成222222')
          if(res.code == 200){
            this.options1 = res.data
          }
        })
    },
      handleClose(){
          this.dialogVisible = false
      },
  },
  created () {
      // this.getWxList1()
      this.getList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.wxUser{
    padding-bottom: 25px;
    // .btn{
    //     margin-top: 20px;
    // }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
